<template>
	<view class="height-100 bg-df-a" style="display: flow-root;">
		<view class="radius-xl bg-white margin padding-lg flex-direction-column">
			<view class="flex-direction-row justify-between">
				<text class="text-df text-bold">{{ detail.productName }}</text>
			</view>
			<text class="text-smd padding-top-xs">预约时间：{{ detail.createTime }}</text>
			<text class="text-smd padding-top-xs">下单时间：{{ detail.createTime }}</text>
			<text class="text-smd padding-top-xs">需求描述：哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</text>
			<text class="text-smd padding-top-xs">预约门店：{{ detail.storeName }}</text>
			<text class="text-smd padding-top-xs">状态：{{ foundItem }}</text>
		</view>
		<view class="radius-xl bg-white margin flex-direction-column radius overflow-hidden">
			<image v-for="item in detail.imageUrlList" class="success-icon" :src="item" :key="item" mode="aspectFit" />
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			if (option) {
				this.detail = JSON.parse(decodeURIComponent(option.row));
				console.log(this.detail);
				this.foundItem = this.statusArray1.find(n => Number(n.status) === Number(option.status)).title;
			}
		},
		data() {
			return {
				form: {
					memberName: '',
					imageUrlList: [],
					diseaseDesc: '',
					appointmentTime: ''
				},
				foundItem:'',
				loading: false,
				detail: {},
				statusArray1: [{
					'title': '未服务',
					'status': 1
				}, {
					'title': '已服务',
					'status': 2
				}, {
					'title': '未预约',
					'status': 0
				}],
			};
		},
		methods: {
		},
	};
</script>

<style scoped>
	/* 自定义样式（如有需要） */
	.info {
		flex: 1;
		padding-left: 10px;
		position: relative;
	}

	.title {
		font-size: 16px;
		margin: 10px 0;
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 超出隐藏 */
		text-overflow: ellipsis;
		/* 超出显示省略号 */
		width: 200px;
	}

	.address {
		color: #999;
		font-size: 13px;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
	}

	.boderSty {
		border: 0.2rpx solid #eee;
		padding: 10px;
		margin: 10px 0;
	}

	.doctor-info {
		display: flex;
	}

	.merchantSty {
		margin: 20px 0;
	}

	.colorSty {
		color: #999;
	}

	.avatar {
		width: 60px;
		height: 60px;
	}

	.details {
		flex: 1;
		padding-left: 10px;
	}

	.doctor-name {
		font-weight: bold;
	}

	.description {
		color: #999;
		margin-top: 8px;
	}

	.tags {
		font-size: 12px;
		margin-top: 10px;
	}

	.tag {
		background-color: #D7D7D7;
		color: #666666;
		padding: 2px 5px;
		margin-right: 5px;
		border-radius: 3px;
	}
	.success-icon {
		width: 100%;
		background-size: cover;
		background-position: center;
	}
</style>